<div style="width:100%;height:100%;overflow:hidden;" class="nihilo">
    <div class='neo'>
        <table class="settings-section">
            <tbody>
                <tr>
                    <td class='sectionTitle' colspan="2">${nls.minIntSpacingLabel}</td>
                </tr>
                <tr>
                    <td>
                        <div class='grid-overlay-setting-slider' data-dojo-attach-point="minIntervalSpacing" data-dojo-type="dijit/form/HorizontalSlider" data-dojo-props="value:100, minimum: 50, maximum:250, discreteValues:41, intermediateChanges:true, showButtons:false"></div>
                    </td>
                    <td>
                        <div class="grid-overlay-setting-slider-value"><span class='sliderValue' data-dojo-attach-point="minIntervalSpacingVal">px</span>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class='sectionTitle' colspan="2">${nls.lineOpacityLabel}</td>
                </tr>
                <tr>
                    <td>
                        <div class='grid-overlay-setting-slider' data-dojo-attach-point="lineOpacity" data-dojo-type="dijit/form/HorizontalSlider" data-dojo-props="value:100, minimum: 0.05, maximum:1, discreteValues:20, intermediateChanges:true, showButtons:false"></div>
                    </td>
                    <td>
                        <div class="grid-overlay-setting-slider-value"><span class='sliderValue' data-dojo-attach-point="lineOpacityVal">%</span></div>
                    </td>
                </tr>
                <tr>
                    <td class='sectionTitle'>${nls.labelOpacityLabel}</td>
                </tr>
                <tr>
                    <td>
                        <div class='grid-overlay-setting-slider' data-dojo-attach-point="labelOpacity" data-dojo-type="dijit/form/HorizontalSlider" data-dojo-props="value:100, minimum: 0.05, maximum:1, discreteValues:20, intermediateChanges:true, showButtons:false"></div>
                    </td>
                    <td><div class="grid-overlay-setting-slider-value"><span class='sliderValue' data-dojo-attach-point="labelOpacityVal">%</span></div></td>
                </tr>
                <tr>
                    <td class='sectionTitle'>${nls.verticalLineLabels}</td>
                </tr>
                <tr>
                    <td class='verticalLineSection'>
                        <div class='image-labels horizontalLabel' title='${nls.horizontalLabel}' data-dojo-attach-point="horizontalLabels"></div>
                        <div class='image-labels verticalLabel' title='${nls.verticalLabel}' data-dojo-attach-point="verticalLabels"></div>
                    </td>
                </tr>
            </tbody>
        </table>
        <div class="grid-overlay-setting-style">
            <div class='sectionTitle'>${nls.styleHeaderLabel}</div>
            <table>
                <thead>
                    <tr>
                        <th>${nls.indexHeaderLabel}</th>
                        <th>${nls.colorHeaderLabel}</th>
                        <th>${nls.fontSizeHeaderLabel}</th>
                        <th>${nls.lineWidthHeaderLabel}</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>${nls.gzd}</td>
                        <td>
                            <div data-dojo-attach-point="colorPicker0" class="grid-overlay-setting-color-picker" data-dojo-type="jimu/dijit/ColorPicker"></div>
                        </td>
                        <td>
                            <div class="font-size" data-dojo-attach-point="fontSize0" data-dojo-type="dijit/form/NumberSpinner"
                            data-dojo-props="intermediateChanges:true, constraints:{min:5,max:72}, value:15"></div>
                        </td>
                        <td>
                            <div class="font-size" data-dojo-attach-point="lineSize0" data-dojo-type="dijit/form/NumberSpinner"
                            data-dojo-props="intermediateChanges:true, constraints:{min:1,max:10}, value:2"></div>
                        </td>
                    </tr>
                    <tr>
                        <td>${nls.gsid}</td>
                        <td>
                            <div data-dojo-attach-point="colorPicker1" class="grid-overlay-setting-color-picker" data-dojo-type="jimu/dijit/ColorPicker"></div>
                        </td>
                        <td>
                            <div class="font-size" data-dojo-attach-point="fontSize1" data-dojo-type="dijit/form/NumberSpinner"
                            data-dojo-props="intermediateChanges:true, constraints:{min:5,max:72}, value:15"></div>
                        </td>
                        <td>
                            <div class="font-size" data-dojo-attach-point="lineSize1" data-dojo-type="dijit/form/NumberSpinner"
                            data-dojo-props="intermediateChanges:true, constraints:{min:1,max:10}, value:2"></div>
                        </td>
                    </tr>
                    <tr>
                        <td>${nls.grid10k}</td>
                        <td>
                            <div data-dojo-attach-point="colorPicker2" class="grid-overlay-setting-color-picker" data-dojo-type="jimu/dijit/ColorPicker"></div>
                        </td>
                        <td>
                            <div class="font-size" data-dojo-attach-point="fontSize2" data-dojo-type="dijit/form/NumberSpinner"
                            data-dojo-props="intermediateChanges:true, constraints:{min:5,max:72}, value:15"></div>
                        </td>
                        <td>
                            <div class="font-size" data-dojo-attach-point="lineSize2" data-dojo-type="dijit/form/NumberSpinner"
                            data-dojo-props="intermediateChanges:true, constraints:{min:1,max:10}, value:2"></div>
                        </td>
                    </tr>
                    <tr>
                        <td>${nls.grid1k}</td>
                        <td>
                            <div data-dojo-attach-point="colorPicker3" class="grid-overlay-setting-color-picker" data-dojo-type="jimu/dijit/ColorPicker"></div>
                        </td>
                        <td>
                            <div class="font-size" data-dojo-attach-point="fontSize3" data-dojo-type="dijit/form/NumberSpinner"
                            data-dojo-props="intermediateChanges:true, constraints:{min:5,max:72}, value:15"></div>
                        </td>
                        <td>
                            <div class="font-size" data-dojo-attach-point="lineSize3" data-dojo-type="dijit/form/NumberSpinner"
                            data-dojo-props="intermediateChanges:true, constraints:{min:1,max:10}, value:2"></div>
                        </td>
                    </tr>
                    <tr>
                        <td>${nls.grid100m}</td>
                        <td>
                            <div data-dojo-attach-point="colorPicker4" class="grid-overlay-setting-color-picker" data-dojo-type="jimu/dijit/ColorPicker"></div>
                        </td>
                        <td>
                            <div class="font-size" data-dojo-attach-point="fontSize4" data-dojo-type="dijit/form/NumberSpinner"
                            data-dojo-props="intermediateChanges:true, constraints:{min:5,max:72}, value:15"></div>
                        </td>
                        <td>
                            <div class="font-size" data-dojo-attach-point="lineSize4" data-dojo-type="dijit/form/NumberSpinner"
                            data-dojo-props="intermediateChanges:true, constraints:{min:1,max:10}, value:2"></div>
                        </td>
                    </tr>
                    <tr>
                        <td>${nls.grid10m}</td>
                        <td>
                            <div data-dojo-attach-point="colorPicker5" class="grid-overlay-setting-color-picker" data-dojo-type="jimu/dijit/ColorPicker"></div>
                        </td>
                        <td>
                            <div class="font-size" data-dojo-attach-point="fontSize5" data-dojo-type="dijit/form/NumberSpinner"
                            data-dojo-props="intermediateChanges:true, constraints:{min:5,max:72}, value:15"></div>
                        </td>
                        <td>
                            <div class="font-size" data-dojo-attach-point="lineSize5" data-dojo-type="dijit/form/NumberSpinner"
                            data-dojo-props="intermediateChanges:true, constraints:{min:1,max:10}, value:2"></div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div data-dojo-attach-point="sampleMap" class="grid-overlay-setting-style-map">
        <div style="position:absolute; right:22px; top:2px; z-Index:999;">
            <div data-dojo-attach-point="switchBasemapBtn" data-dojo-type="dijit/TitlePane" data-dojo-props="open:false">
              <div data-dojo-type="dijit/layout/ContentPane" style="width:400px; height:280px; overflow:auto;">
                <div data-dojo-attach-point="basemapGalleryWidget"></div>
              </div>
            </div>
        </div>        
    </div>
</div>
